<template>
  <div class="msg_container">
    <div class="suggest_wrapper" v-show="!showList">
      <div class="msg_detail">
        <p class="title">想说什么尽管说。我改！</p>
        <textarea name="suggest" cols="30" rows="6" class="suggest_area"></textarea>
        <p class="title">请留下您的联系方式(也可以不填)</p>
        <textarea name="suggest" cols="30" rows="2" class="suggest_area"></textarea>
        <mt-button type="primary" size="large">提交</mt-button>
      </div>
      <p class="read_suggest" @click="showSuggestList">查看留言列表</p>
    </div>
    <div class="suggest_list" v-show="showList" @click="hideSuggestList">
      <ul>
        <span class="title">近期留言（只显示最近五条）</span>
        <li>
          <span class="name">匿名用户</span>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
        </li>
        <li>
          <span class="name">匿名用户</span>xxxxxxxx
        </li>
        <li>
          <span class="name">匿名用户</span>xxxxxxxx
        </li>
        <li>
          <span class="name">匿名用户</span>xxxxxxxx
        </li>
        <li>
          <span class="name">匿名用户</span>xxxxxxxx
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: 'messages',
  data() {
    return {
      showList: false
    }
  },
  methods: {
    showSuggestList() {
      this.showList = true
    },
    hideSuggestList() {
      this.showList = false
    }
  }
}
</script>

<style lang="less" scoped>
  .msg_container {
    min-height: calc(100vh - 90px);
    min-height: -webkit-calc(100vh - 90px);
    min-height: -moz-calc(100vh - 90px);
    min-height: -o-calc(100vh - 90px);
    padding: 15px;
    background: #fff;
    position: relative;
    .suggest_wrapper {
      .msg_detail {
        .title {
          line-height: 40px;
          font-size: 16px;
          color: #000;
          font-weight: bold;
        }
        .suggest_area {
          background: transparent;
          border: 1px solid #000;
        }
      }
      .read_suggest {
        margin: 0;
        font-size: 16px;
        color: #000;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
      .read_suggest:hover {
        text-decoration: underline;
        color: #ccc;
      }
    }
    .suggest_list {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      justify-content: center;
      margin-top: 50px;
      ul {
        width: 100%;
        max-width: 400px;
        overflow: hidden;
        text-overflow: ellipsis;
        list-style: none;
        .title {
          padding: 25px 0 ;
          display: inline-block;
        }
        li {
          line-height: 40px;
          overflow: hidden;
          text-overflow: ellipsis;
          word-break: break-all;
          .name {
            color: #300daf;
            font-weight: 500;
            font-size: 16px;
            margin-right: 10px;
          }
        }
      }
    }
  }
</style>
